<template >
  <div class="index-pool">
    <div class="pool-warp">
      <div class="hd">
        <p class="title">Pool data</p>
        <p class="account">0xFDEc****4CeFF70</p>
      </div>
      <div class="bd">
        <div class="item-li">
          <div class="item-l">
            <p class="title">Valid Node</p>
            <p class="num">1,722</p>
          </div>
          <div class="item-r">
            <p class="title">Total output ETH</p>
            <p class="num">62,583.097704 ETH</p>
          </div>
        </div>
        <div class="item-li">
          <div class="item-l">
            <p class="title">Participant</p>
            <p class="num">27,666</p>
          </div>
          <div class="item-r">
            <p class="title">User Revenue (USDT)</p>
            <p class="num">1,472,171.12</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {

    }
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.index-pool {
  height: rem(115);
  position: relative;
  z-index: $level3;
  @include center;

  .pool-warp {
    width: rem(345);
    height: rem(160);
    background: #fff;
    box-shadow: rem(2) rem(4) rem(8) rgb(190 178 213 / 50%);
    border-radius: rem(8);
    position: absolute;
    top: rem(-45);
    padding-left: rem(15);
    padding-right: rem(12);

    .hd {
      @include vC;
      justify-content: space-between;
      height: rem(45);

      .title {
        font-size: rem(18);
        font-weight: 600;
        color: #171717;
        margin-bottom: rem(6);
      }

      .account {
        font-size: rem(14);
        margin-bottom: rem(1);
        color: rgb(0, 82, 255);
        width: rem(150);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: end;
        font-weight: bold;
      }
    }

    .bd {
      .item-li {
        @include vC;
        height: rem(51);

        .item-l {
          width: rem(104);
        }

        .item-r {
          width: rem(195);
        }

        .title {
          font-size: rem(12);
          color: #999;
          height: rem(22);
          line-height: rem(22);
        }

        .num {
          font-size: rem(14);
          font-weight: 700;
          color: #171717;
        }
      }
    }
  }
}
</style>
